<template>
  <div
    :id="id"
    style="width:100%;height:400px"
  ></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  props: {
    id: {
      type: String,
      default: 'main'
    },
    title: {
      type: String,
      default: ''
    },
    data: {
      type: Array,
      required: true
    },
    lineColor: {
      type: String,
      default: 'red'
    }
  },
  computed: {
    // 处理出横轴数据
    xdata() {
      let tmp = []
      this.data.forEach((item) => {
        tmp.push(item.name)
      })
      return tmp
    },
    // 处理出纵轴数据
    ydata() {
      let tmp = []
      this.data.forEach((item) => {
        tmp.push(item.num)
      })
      return tmp
    }
  },
  mounted() {
    // 获取DOM节点 渲染图表
    var chartDom = document.getElementById(this.id)
    // 初始化
    var myChart = echarts.init(chartDom)
    // 图表配置
    var option = {
      // 图的标题
      title: {
        text: this.title,
        // 据顶部的距离
        top: 20,
        bottom: 50,
        x: 'center'
      },
      // 工具栏
      toolbox: {
        show: true,
        feature: {
          //切换图表类型
          magicType: { type: ['line', 'bar'] },
          saveAsImage: {}
        }
      },
      // 横坐标
      xAxis: {
        type: 'category',
        // 数据
        // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        data: this.xdata
      },
      // 图表的距离
      grid: {
        top: '20%'
      },
      // 纵坐标
      yAxis: {
        type: 'value',
        // 数据进行格式化
        axisLabel: {
          formatter: '{value} 件'
        }
      },
      series: [
        {
          // 设置每个数据项的样式 显示具体数值
          itemStyle: { normal: { label: { show: true } } },
          // 数据项
          // data: [150, 230, 224, 218, 135, 147, 260],
          data: this.ydata,
          // 图表类型  line 折线图
          type: 'line',
          // 颜色
          color: this.lineColor
        }
      ]
    }
    // 设置图表的选项
    option && myChart.setOption(option)
  }
}
</script>

<style lang="scss" scoped>
</style>